<template>
	<view class="addEquipment">
		<!-- 设备编号 -->
		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title">
				<view class="left">
					<view style="color: red;">*</view>设备编号
				</view>
				<view class="right1">
					<view class="right-input">
						<view class="" v-if="deviceId" style="color: #666;">
							{{params.deviceNum}}
						</view>
						<input maxlength="16" v-else placeholder="请输入设备编号" v-model="params.deviceNum" />
						
					</view>
				</view>
			</view>
		</view>
		<!-- 设备名称 -->
		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title">
				<view class="left">
					<view style="color: red;">*</view>设备名称
				</view>
				<view class="right1">
					<view class="right-input">
						<input maxlength="16" placeholder="请输入设备名称" v-model="params.deviceName" />
					</view>
				</view>
			</view>
		</view>
		<!-- 设备类型 -->
		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title" @click="togoSelectDeviceType">
				<view class="left">
					<view style="color: red;">*</view>设备类型
				</view>
				<view class="right1">
					<view style="color: #000; padding-right: 20rpx;" v-if="params.deviceTypeName">
						{{params.deviceTypeName}}
					</view>
					<view v-else>请选择</view>
					<view class="iconfont icon-app-xiangyou"></view>
				</view>
			</view>
		</view>
		<tki-tree ref="tkitree2" :selectParent="true" :range="deviceTypeList" rangeKey="configValue"
			@confirm="treeConfirm2" @cancel="treeCancel2"></tki-tree>
		<!-- 所在部门 -->
		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title" @click="togoSelectUnit">
				<view class="left">
					<view style="color: red;">*</view>所在部门
				</view>
				<view class="right1">
					<view style="color: #000; padding-right: 20rpx;" v-if="params.deptName">{{params.deptName}}</view>
					<view v-else>请选择</view>
					<view class="iconfont icon-app-xiangyou"></view>
				</view>
			</view>

		</view>
		<tki-tree ref="tkitree" :selectParent="true" :range="unitList" rangeKey="deptName" @confirm="treeConfirm"
			@cancel="treeCancel"></tki-tree>
		<!-- 设备状态 -->
		<view class="bx-list" style="margin-top: 2rpx;" v-if="!deviceId">
			<view class="bx-list-title">
				<view class="left">
					<view style="color: red;">*</view>设备状态
				</view>
				<view class="right1">
					<view style="color: #666;">{{['使用中','维修中','维保中','点检中'][params.deviceStatus-1]}}</view>
				</view>
			</view>
		</view>
		<!-- 位置编号 -->
		<view class="bx-list" style="margin-top: 10rpx;">
			<view class="bx-list-title">
				<view class="left">
					设备型号
				</view>
				<view class="right1">
					<view class="right-input">
						<input maxlength="16" placeholder="请输入" v-model="params.modelName" />
					</view>
				</view>
			</view>
		</view>
		<!-- 位置编号 -->
		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title">
				<view class="left">
					位置编号
				</view>
				<view class="right1">
					<view class="right-input">
						<input maxlength="16" placeholder="请输入" v-model="params.seatNum" />
					</view>
				</view>
			</view>
		</view>
		<!-- 设备照片 -->
		<view class="bx-title" style="margin-top: 2rpx; padding-top: 60rpx;">
			<view class="left">
				设备照片
			</view>
		</view>
		<view class="kiss-upload">
			<uploadImg :maxCount="1" @getdata="getdata" :fileType="13"
				:fileList="fileList1" :sourceType="sourceType" 
				@deletePicture="deletePicture"></uploadImg>
		</view>
		<!-- 维修费用 -->
		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title">
				<view class="left">
					设备价值
				</view>
				<view class="right1">
					<view class="right-input">
						<input maxlength="12" placeholder="请输入" type="digit"
							style="width: 450rpx; font-size: 28rpx; padding-right: 10rpx;"
							v-model="params.deviceCost" />
						<view style="color:#2b2b2b;">万元</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 耗能 -->
		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title">
				<view class="left">
					耗能
				</view>
				<view class="right1">
					<view class="right-input">
						<input maxlength="16" placeholder="请输入" type="digit"
							style="width: 450rpx; font-size: 28rpx; padding-right: 10rpx;"
							v-model="params.energyConsumption" />
						<view style="color:#2b2b2b;">KW</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 购买日期 -->
		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title" @click="togoOpenpurchaseDate">
				<view class="left">
					购买日期
				</view>
				<view class="right1">
					<view :class="[params.purchaseDate!=''?'select-bg':'']">
						{{params.purchaseDate!=''?params.purchaseDate:'请选择'}}
					</view>
					<view class="iconfont icon-app-xiangyou"></view>
				</view>
			</view>
		</view>
		<u-datetime-picker :show="purchaseDateShow" :value="purchaseDatevalue" mode="date" @cancel="cancelTime1"
			@confirm="confirmTime1">
		</u-datetime-picker>
		<!-- 投产日期 -->
		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title" @click="togoOpenoperationDate">
				<view class=" left">
					投产日期
				</view>
				<view class="right1">
					<view :class="[params.operationDate!=''?'select-bg':'']">
						{{params.operationDate!=''?params.operationDate:'请选择'}}
					</view>
					<view class="iconfont icon-app-xiangyou"></view>
				</view>
			</view>
		</view>
		<u-datetime-picker :show="operationDateShow" :value="operationDatevalue" mode="date" @cancel="cancelTime2"
			@confirm="confirmTime2">
		</u-datetime-picker>
		<!-- 使用年限 -->
		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title">
				<view class="left">
					使用年限
				</view>
				<view class="right1">
					<view class="right-input">
						<input  maxlength="16" placeholder="请输入" type="number"
							style="width: 450rpx; font-size: 28rpx; padding-right: 10rpx;"
							v-model="params.usefulLife" />
						<view style="color:#2b2b2b;">年</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 供应商 -->
		<view class="bx-list" style="margin-top: 10rpx;">
			<view class="bx-list-title" @click="togoSelectPurveyor">
				<view class="left">
					供应商
				</view>
				<view class="right1">
					<view style="color: #000; padding-right: 20rpx;" v-if="params.purveyorName">
						{{params.purveyorName}}
					</view>
					<view v-else>请选择</view>
					<view class="iconfont icon-app-xiangyou"></view>
				</view>
			</view>
		</view>
		<u-popup :show="showFactory" mode="bottom" :round="10" @close="close" @open="open">
			<view class="sex-select">
				<view class="sex-item" @click="updateItem(item)" v-for="(item,index) in purveyorList" :key="item.id">
					{{item.factoryName}}
				</view>
			</view>
		</u-popup>
		<!-- 厂家 -->
		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title">
				<view class="left">
					厂家
				</view>
				<view class="right1">
					<view class="right-input">
						<input maxlength="16" placeholder="请输入厂家" v-model="params.manufacturer" />
					</view>
				</view>
			</view>
		</view>
		<!-- 品牌 -->
		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title">
				<view class="left">
					品牌
				</view>
				<view class="right1">
					<view class="right-input">
						<input maxlength="16" placeholder="请输入品牌" v-model="params.brand" />
					</view>
				</view>
			</view>
		</view>
		<view class="bx-bottom">
			<view class="btn-right" @click="$dianji(submit,'onoff')">保存</view>
		</view>
	</view>


</template>

<script>
	import uploadImg from '../components/uploadimg/uploadimg.vue';
	export default {
		components: {
			uploadImg
		},
		data() {
			return {
				file:'',
				deviceId:'',
				onoff: true,
				showFactory: false,
				purchaseDateShow: false,
				operationDateShow: false,
				purchaseDatevalue: Number(new Date()),
				operationDatevalue: Number(new Date()),
				params: {
					deviceNum: '', //设备编号
					deviceName: '', //设备名称	
					deviceType: '', //设备类型id	
					deviceTypeName: '', //设备类型名称	
					modelName: '', //设备型号名称	
					deptId: '', //部门id	
					deptName: '',
					deviceStatus: 1, //设备状态；1.使用中； 2.维修中； 3.维保中； 4.点检中；	
					seatNum: '', //位置编号	
					devicePicture: '', //设备照片	
					deviceCost: "", //设备价值；单位：万元	
					energyConsumption: "", //设备能耗；单位：KW/h	
					purchaseDate: '', //购买日期	
					operationDate: '', //投产日期	
					purveyorId: '', //供应商id	
					purveyorName: '', //供应商名称	
					brand: '', //品牌	
					usefulLife: "", //使用年限；单位：年	
					manufacturer: '', //厂家
				},
				unitList: [], //部门列表
				deviceTypeList: [],
				purveyorList: [],
				sourceType: ['album', 'camera'],
				fileList1: [],
				saveParams: {
					pictures: '',
				},
			}
		},
		onLoad(options) {
			this.getUnitList()
			this.getDeviceTypeList()
			this.getPurveyorList()
			if(options.id){
				this.deviceId=options.id
				this.getDeviceDetail()
			}
		},
		methods: {
			//选择部门
			togoSelectUnit() {
				this.$refs.tkitree._show();
			},
			//获取部门列表
			getUnitList() {
				uni.$u.http.get(`/base/mobile/sysDeptInfo/deptTreeList`).then(res => {
					if (res.code == 0) {
						this.unitList = res.data
					}
				}).catch(err => {})
			},
			//部门选择确认
			treeConfirm(e) {
				console.log(e[0].id);
				this.params.deptId = e[0].id
				this.params.deptName = e[0].deptName
			},
			// 取消回调事件
			treeCancel(e) {
				console.log(e)
			},

			//设备类型
			togoSelectDeviceType() {
				this.$refs.tkitree2._show();
			},
			//获取设备类型列表
			getDeviceTypeList() {
				uni.$u.http.post(`/device/mobile/sysDataDictionary/dictionaryList`, {
					configType: 'device_type'
				}).then(res => {
					if (res.code == 0) {
						console.log(res.data, 'res.data');
						this.deviceTypeList = res.data
					}
				}).catch(err => {})
			},
			//设备类型选择确认
			treeConfirm2(e) {
				this.params.deviceType = e[0].id
				this.params.deviceTypeName = e[0].configValue
			},
			// 取消设备类型
			treeCancel2(e) {
				console.log(e)
			},
			//上传图片
			
			getdata(e) {
				this.pictrueList = e;
				this.fileList1 = [];
				if (this.pictrueList.length > 0) {
					this.saveParams.pictures = "";
					let arry = []
					this.pictrueList.map(item => {
						arry.push(item.url)
						let dd = {
							url: item.url
						}
						this.fileList1.push(dd);
					})
					this.saveParams.pictures = arry.toString()
				}
			},
			//删除图片
			
			deletePicture(e) {
				this.pictrueList = e;
				this.fileList1 = [];
				this.saveParams.pictures = "";
				if (this.pictrueList.length > 0) {
			
					let arry = []
					this.pictrueList.map(item => {
						arry.push(item.url)
						let dd = {
							url: item.url
						}
						this.fileList1.push(dd);
					})
					this.saveParams.pictures = arry.toString()
				}
			},
			togoOpenpurchaseDate() {
				this.purchaseDateShow = true;
			},
			togoOpenoperationDate() {
				this.operationDateShow = true;
			},
			cancelTime1(e) {
				this.purchaseDateShow = false;
			},
			confirmTime1(e) {
				this.purchaseDateShow = false;
				const timeFormat = uni.$u.timeFormat;
				let timeValue = timeFormat(e.value, 'yyyy-mm-dd');
				this.params.purchaseDate = timeValue;

			},
			cancelTime2(e) {
				this.operationDateShow = false;
			},
			confirmTime2(e) {
				this.operationDateShow = false;
				const timeFormat = uni.$u.timeFormat;
				let timeValue = timeFormat(e.value, 'yyyy-mm-dd');
				this.params.operationDate = timeValue;

			},
			//供应商列表
			getPurveyorList() {
				uni.$u.http.get(`/device/mobile/devicePurveyor/getPurveyorList`).then(res => {
					if (res.code == 0) {
						this.purveyorList = res.data
					}
				}).catch(err => {})
			},
			togoSelectPurveyor() {
				this.showFactory = true
			},
			open() {},
			close() {
				this.showFactory = false
			},
			updateItem(item) {
				this.params.purveyorId = item.id;
				this.params.purveyorName = item.factoryName;
				this.showFactory = false;
			},
			submit() {
				if(!this.params.deviceNum) return uni.$u.toast('设备编号不能为空')
				if(!this.params.deviceName) return uni.$u.toast('设备名称不能为空')
				if(!this.params.deviceType) return uni.$u.toast('设备类型不能为空')
				if(!this.params.deptName) return uni.$u.toast('所在部门不能为空')
				if(!this.params.deviceStatus) return uni.$u.toast('设备状态不能为空')
				if(this.params.usefulLife&&this.params.usefulLife%1 !== 0) return uni.$u.toast('使用年限只能为整数')
				if(this.params.deviceCost && !/^(([0-9]|([1-9][0-9]{0,9}))((\.[0-9]{1,2})?))$/.test(this.params.deviceCost)){
					return uni.$u.toast('设备价值最多2位小数')
				}
				this.params.devicePicture = this.saveParams.pictures //照片
				//	
				if(this.deviceId){
					uni.$u.http.put(`/device/mobile/deviceInfo/editDevice`, {...this.params,id:this.deviceId}).then(
						res => {
							if (res.code == 0) {
								uni.$u.toast('编辑成功')
								setTimeout(()=>{
									uni.navigateTo({
										url: '/pages/subPackagesC/equipmentList/index'
									})
								},200)
							}
					}).catch(err => {})
				}else{
					uni.$u.http.post(`/device/mobile/deviceInfo/addDevice`, this.params).then(
						res => {
							if (res.code == 0) {
								uni.$u.toast('新建成功')
								setTimeout(()=>{
									uni.navigateTo({
										url: '/pages/subPackagesC/equipmentList/index'
									})
								},200)
								
							}
					}).catch(err => {})
				}
				
			},
			
			getDeviceDetail(){
				uni.$u.http.get(`/device/mobile/deviceInfo/deviceDetail/${this.deviceId}`).then(res => {
					if (res.code == 0) {
						this.params.deviceNum=res.data.deviceNum, //设备编号
						this.params.deviceName=res.data.deviceName, //设备名称	
						this.params.deviceType=res.data.deviceType, //设备类型id	
						this.params.deviceTypeName=res.data.deviceTypeName, //设备类型名称	
						this.params.modelName=res.data.modelName, //设备型号名称	
						this.params.deptId=res.data.deptId, //部门id	
						this.params.deptName=res.data.deptName,
						this.params.deviceStatus=res.data.deviceStatus, //设备状态；1.使用中； 2.维修中； 3.维保中； 4.点检中；	
						this.params.seatNum=res.data.seatNum, //位置编号	
						// this.params.devicePicture=res.data.devicePicture, //设备照片	
						this.params.deviceCost=res.data.deviceCost, //设备价值；单位：万元	
						this.params.energyConsumption=res.data.energyConsumption, //设备能耗；单位：KW/h	
						this.params.purchaseDate=res.data.purchaseDate, //购买日期	
						this.params.operationDate=res.data.operationDate, //投产日期	
						this.params.purveyorId=res.data.purveyorId, //供应商id	
						this.params.purveyorName=res.data.purveyorName, //供应商名称	
						this.params.brand=res.data.brand, //品牌	
						this.params.usefulLife=res.data.usefulLife, //使用年限；单位：年	
						this.params.manufacturer=res.data.manufacturer //厂家
						this.file = res.data.devicePicture||'';
						//设备照片
						this.fileList1 = [];
						this.saveParams.pictures = res.data.devicePicture;
						if (res.data.devicePicture) {
							var pictures = res.data.devicePicture.split(',')
							pictures.forEach(s => {
								let dd = {
									url: s
								}
								this.fileList1.push(dd);
							})
						}
					}
				}).catch(err => {})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
		padding-bottom: 160rpx;
	}

	.bx-title {
		background: #fff;
		padding: 20rpx;

		.left {
			display: flex;
			font-size: 34rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 0px;
			color: rgba(0, 0, 0, 1);
			background: #fff;
			min-width: 200rpx;
		}
	}

	.bx-upload {
		padding: 20rpx 30rpx;
		background: #fff;
	}

	.bx-list {
		background: #fff;

		.bx-list-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 20rpx;

			.left {
				display: flex;
				font-size: 34rpx;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 0px;
				color: rgba(0, 0, 0, 1);
			}

			.right {
				display: flex;
				justify-content: space-around;
				width: 50%;

				.sm-add {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					color: #0F53AC;
					background-color: rgba(2, 173, 130, 0.3);
					font-size: 24rpx;
				}

				.sm-sd {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					color: #0F53AC;
					background-color: rgba(2, 173, 130, 0.3);
					font-size: 24rpx;
				}
			}

			.right1 {
				display: flex;
				align-items: center;
				font-size: 34rpx;
				color: #8c8c8c;

				.right-input {
					width: 100%;
					text-align: right;
					display: flex;
					align-items: center;
					color: #000000;
				}

				.select-bg {

					color: #000000;
				}
			}
		}

		.select-look {
			padding-left: 30rpx;
			padding-bottom: 30rpx;
			padding-right: 30rpx;

			.look-item {
				// padding: 10rpx 20rpx;
				border-radius: 24rpx;
				// color: #0F53AC;
				// background-color: rgba(2, 173, 130, 0.3);
				font-size: 28rpx;
			}
		}

		.bx-info {
			display: flex;
			padding: 10rpx 20rpx 20rpx 20rpx;

			.left-icon {
				image {
					width: 96rpx;
					height: 96rpx;
					border-radius: 12rpx;
				}
			}

			.right-txt {
				padding-left: 32rpx;

				.txt1 {
					color: #000000;
					font-size: 34rpx;
					font-weight: 400;
				}

				.txt2 {
					color: #8c8c8c;
					font-size: 28rpx;
					margin-top: 10rpx;
				}
			}

		}

		.input-textrea {
			margin: 20rpx;
			border-radius: 8rpx;
			background: #f2f2f2;

			.textrea {
				background: #f2f2f2;
			}
		}

	}

	.bx-bottom {
		width: 100%;
		background: #ffffff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 20rpx 0;
		position: fixed;
		z-index: 9;
		bottom: 0;

		.btn-left {
			width: 90%;
			height: 92rpx;
			border-radius: 12rpx;
			background: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #0F53AC;
			border: 1px solid #0F53AC;
			font-size: 34rpx;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 0px;
		}

		.btn-right {
			width: 90%;
			height: 92rpx;
			border-radius: 12rpx;
			background: #0F53AC;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 34rpx;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 0px;
		}
	}
</style>